<table class="overviewSection-container" ng-class="{
    'overviewSection-plan-free': organization.PlanName === 'free'
}">
    <tbody class="overviewSection-tbody">
        <tr>
            <th scope="row" translate-context="Title" translate>Username</th>
            <td colspan="2">
                <strong>{{ user.Name }}</strong>
            </td>
        </tr>
        <tr>
            <th scope="row" translate-context="Title" translate>Domains</th>
            <td>
                <strong class="overviewSection-domains-name" >{{ organization.UsedDomains }} <span translate-context="dashboard page. how many domains exist for an organization as well as the total number allowed." translate>of</span> {{ organization.MaxDomains }}</strong>
                <strong class="overviewSection-domains-free">0</strong>
            </td>
            <td class="text-right actions">
                <a
                    ui-sref="secured.domains"
                    class="text-purple overviewSection-link-manage"
                    translate-context="Action"
                    translate>Manage</a>
                <a
                    href="#"
                    class="text-purple scroll overviewSection-link-upgrade"
                    translate-context="Action"
                    translate>Upgrade</a>
            </td>
        </tr>
        <tr>
            <th scope="row" translate-context="Title" translate>Addresses</th>
            <td>
                <strong class="overviewSection-addresses-total">{{ organization.UsedAddresses }} <span translate-context="dashboard page. how many addresses exist for an organization as well as the total number allowed." translate>of</span> {{ organization.MaxAddresses }}</strong>
                <strong class="overviewSection-addresses-free">1</strong>
            </td>
            <td class="text-right actions">
                <a
                    ui-sref="secured.members({ action: 'scroll' })"
                    class="text-purple overviewSection-link-signatureManager"
                    translate-context="Action"
                    translate>Manage</a>
                <a
                    href="#"
                    class="text-purple scroll overviewSection-link-signatureUpgrade"
                    translate-context="Action"
                    translate>Upgrade</a>
            </td>
        </tr>
        <tr>
            <th scope="row" translate-context="Title" translate>Storage</th>
            <td colspan="2" class="overviewSection-storage">
                <strong class="overviewSection-storage-size">{{ organization.UsedSpace | humanSize }} <span translate-context="show used storage for an account" translate>of</span> {{ organization.MaxSpace | humanSize }}</strong>
                <strong class="overviewSection-storage-free">{{ user.UsedSpace | humanSize }} <span translate-context="show used storage for an account" translate>of</span> {{ user.MaxSpace | humanSize }}</strong>
                <br>
                <progress-bar id="storageBar"></progress-bar>
            </td>
        </tr>
    </tbody>
    <tbody class="overviewSection-tbody-billing">
        <tr>
            <th scope="row" translate-context="Title" translate>Credit</th>
            <td>
                <strong>{{ (user.Credit || 0) / 100 | currency: user.Currency }}</strong>
            </td>
            <td>
                <donate-btn class="topUp-button" data-item="topUp"></donate-btn>
                <gift-code-btn data-action="modal"></gift-code-btn>
            </td>
        </tr>
        <tr ng-if="subscription.CouponCode">
            <th scope="row" translate-context="Title" translate>Coupon</th>
            <td colspan="2">
                <code class="overviewSection-couponCode">{{ subscription.CouponCode }}</code>
            </td>
        </tr>
    </tbody>
</table>
